<template>
  <div class="product">
    <!-- 顶部 -->
    <van-nav-bar title="商品详情">
      <span slot="left" @click="$router.go(-1)"><i slot="icon" class="iconfont icon-zhiyuanfanhui17"></i></span>
      <span slot="right"><i slot="icon" class="iconfont icon-zhuye"></i></span>
    </van-nav-bar>

    <!-- 轮播图插件 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="../assets/images/banner1.png"></van-swipe-item>
      <van-swipe-item><img src="../assets/images/banner2.png"></van-swipe-item>
    </van-swipe>
    <!-- 文字介绍 -->
    <div class="text">{{productDetail.proName}}</div>
    <!-- 价格 -->
    <div class="price">价格: <span>￥{{productDetail.price}}</span><s>￥{{productDetail.oldPrice}}</s></div>
    <!-- 尺码 -->
    <div class="size">
      <div class="size_text">尺码:</div>
      <ul class="size_list">
        <li v-for="item in sizeList" :key="item">{{item}}</li>
      </ul>
    </div>
    <!-- 数量 -->
    <div class="num">
      <div class="num_text">数量:</div>
      <van-stepper
       v-model="stepVal"
       min="0"
       @change="numChange"
       />
      剩余:{{productDetail.num}}件
    </div>

    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-mini-btn
        icon="cart-o"
        text="购物车"
        @click="cartInfo"
      />
      <van-goods-action-big-btn
        text="加入购物车"
        @click="addToCart"
      />
      <van-goods-action-big-btn
        primary
        text="立即购买"
        @click="cartInfo"
      />
    </van-goods-action>
  </div>
</template>
<script>
import { getProductDetail } from '@/api'
export default {
  data () {
    return {
      stepVal: 0, // 步进器的值
      productDetail: {},
      sizeList: []// 尺码表
    }
  },
  created () {
    this.initProduct(this.sizeLists)
  },
  methods: {
    // 初始化页面数据
    initProduct (cb) {
      getProductDetail(this.$route.params.id)
        .then(res => {
          console.log(res)
          this.productDetail = res.data
          cb && cb()
        })
    },
    // 步进器step数值改变事件
    numChange () {
      console.log(this.stepVal)
    },
    // 跳转到购物车信息页
    cartInfo () {
      console.log('跳转到购物车信息页')
    },
    // 加入到购物车
    addToCart () {
      console.log('加入到购物车')
    },
    // 循环制作尺码表
    sizeLists () {
      console.log(this.productDetail)
      let arr = this.productDetail.size.split('-')
      for (var i = Number(arr[0]); i <= Number(arr[1]); i++) {
        this.sizeList.push(i)
      }
      console.log(this.sizeList)
    }
  }
}
</script>

<style lang="scss" scoped>
.product{
  img{width: 100%;}
  >div{
    border-bottom: 1px solid #ddd;
  }
  .van-nav-bar {
      background-color: #006699;
      .van-nav-bar__title {
        color: #fff;
        font-size: 17px;
        font-weight: blod;
      }
      .icon-zhiyuanfanhui17 ,.icon-zhuye{
        color: #fff;
        font-size: 17px;
      }
    }
  .text{
    font-size: 18px;
    color: #454545;
    padding-left: 5px;
    padding-bottom: 20px;
  }
  .price{
    padding-left: 5px;
    height: 50px;
    line-height: 50px;
    span{
      color: red;
      font-size: 26px;
      font-weight: 700;
      margin: 0 10px;
    }
    s{
      font-size: 14px;
      color: #666
    }
  }
  .size{
    padding: 20px 5px;
    overflow: hidden;
    display: flex;
      .size_list{
        li{
        border: 1px solid #ccc;
        float: left;
        padding: 3px 8px;
        margin: 0 3px;
      }
    }
  }
  .num{
    display: flex;
    padding: 20px 5px;
    border: none;
    .van-stepper{
      margin: 0 10px;
    }
  }
}
</style>
